<template>
	<view class="address">
		<view class="header_top1">
			<view class="" style="width: 120rpx;">
				<u-icon @click="ToBack" name="arrow-left" style="opacity: 1;" color="#010101" size="45"></u-icon>
			</view>
			<view class="header_top_title">
				{{title}}
			</view>
			<view class="del_text" style="width: 120rpx;" @click="del(id)">
				删除地址
			</view>
		</view>
		<view class="address_info">
			<view class="address_info_item">
				<view class="address_info_left">姓名</view>
				<input class="address_info_right" type="text" maxlength="20" v-model="info.name" placeholder="请输入姓名" />
			</view>
			<view class="address_info_item">
				<view class="address_info_left">电话</view>
				<input type="number" maxlength="16" v-model="info.phone" placeholder="请输入电话" />
			</view>
			<view  @click="open_pop" class="address_info_item">
				<view class="address_info_left">地址</view>
				<view class="" style="flex: 1; display: flex; justify-content: space-between;">	
					<view class="address_info_item_input">{{area_text}}</view>
					<image style="width: 24rpx; height: 24rpx;" src="https://www.mengkahuyu.com/index_png/back.png" mode=""></image>
				</view>
			</view>
			<view  class="address_info_item">
				<view class="address_info_left">详细地址</view>
				<input type="text" maxlength="120" v-model="info.address" placeholder="请输入详细地址" />
			</view>
			<view class="address_info_item">
				<view class="address_info_left">身份证号</view>
				<input type="idcard" v-model="info.idcode" placeholder="请输入身份证号" />
			</view>
			<!-- <view class="address_info_item">
				<view class="address_info_left">设置默认地址</view>
				<input type="idcard" v-model="info.idcode" placeholder="请输入身份证号" />
			</view> -->
		</view>
		<view class="card_box">
			<view class="address_info_left">
				上传身份证
			</view>
			<view class="card_box1">
				<view class="card_item_box" @click="upload_idCard(1)">
					<image v-if="info.id_pic1" class="card_img" :src="info.id_pic1?info.id_pic1:'https://qiudaoyu.xikawa.net/assets/id1.jpg'" mode=""></image>
				</view>
				<view class="card_item_box" @click="upload_idCard(2)">
					<image v-if="info.id_pic2" class="card_img" :src="info.id_pic2?info.id_pic2:'https://qiudaoyu.xikawa.net/assets/id2.jpg'" mode=""></image>
				</view>
				<!-- <view class="card_box_item card_left "  @click="upload_idCard(1)">
					<image class="card_img" :src="info.id_pic1?info.id_pic1:'https://qiudaoyu.xikawa.net/assets/id1.jpg'" mode="widthFix"></image>
					<view v-if="info.id_pic1?false:true" class="card_tost">
						<u-icon name="plus-circle-fill" style="margin-bottom: 16rpx;" color="#fff" size="56"></u-icon>
						上传人像面
					</view>
				</view>
				<view class="card_box_item" @click="upload_idCard(2)">
					<image class="card_img" :src="info.id_pic2?info.id_pic2:'https://qiudaoyu.xikawa.net/assets/id2.jpg'" mode="widthFix"></image>
					<view v-if="info.id_pic2?false:true" class="card_tost" >
						<u-icon name="plus-circle-fill" style="margin-bottom: 16rpx;" color="#fff" size="56"></u-icon>
						上传国徽面
					</view>
				</view> -->
			</view>
			
		</view>
		<u-popup v-model="addressShow" mode="bottom">
			<citySelect v-if="addressShow" :values="addressInfo" @change="addressChange" />
			<view class="submit_box">
				<view @click="shure_submit" class="submit_btn">
					确认
				</view>
			</view>
		</u-popup>
		<u-action-sheet :list="type_list" @click="typechange" v-model="type_show"></u-action-sheet>
		<view  class="button_submit_all1">
			<u-button class="btns_all1"  @click="onSubmit(id?1:2)" :hair-line="false" :ripple="true" ripple-bg-color="rgba(9, 82, 200, 0.15)">
				{{id?'保存':'添加'}}
			</u-button>
		</view>	
	</view>
</template>

<script>
	import citySelect from '@/componts/citySelect/index.vue';
	import AddressParse, { AREA, Utils } from "address-parse";
	import config from "@/config/index.js";
	const {baseUrl , imgUrl} = config;
	export default {
		components:{
		    citySelect,
		},
		data() {
			return {
				style:{},
				alltext:'',
				code_type:'',//通关码方式
				type_list:[
					{text:'个人通关码' , type:1},
					{text:'韩国登入证' , type:2},
					{text:'个人护照' , type:3},
					{text:'EMS通关' , type:4},
				],
				type_show:false,//通关方式弹出层
				area_text:'请选择邮寄地址',
				title:'',
				id:null,
				info:{
					id_pic1:'', //国徽面
					id_pic2:'',//人像面
				},//地址详情
				kor_type:'',
				addressInfo:[],
				addressShow:false,
				
			}
		},
		onLoad(data) {
			this.kor_type = uni.getStorageSync('kor_type')?uni.getStorageSync('kor_type'):''
			if(data.id){
				this.id = data.id
				this.title = '编辑地址'
				this.getInfo()
			}else{
				this.title = '新增地址'
			}
		},
		onShow() {
			var style =  uni.getStorageSync('style')
			style = JSON.parse(style)
			this.style = style
			this.kor_type = uni.getStorageSync('kor_type')?uni.getStorageSync('kor_type'):''
		},
		methods: {
			del(id){
				var data = {
					id:id
				}
				uni.showModal({
					title: '提示',//标题
					content: "确认删除收货地址",//提示内容可以加入\r\n进行换行
					showCancel: true,//是否显示取消按钮，默认为true
					success: res => {
						if (res.confirm) { //点击确定之后执行的代码
						// /kor_index/UserAddress/del
						if(this.kor_type=='kor'){
							this.$wqzApi.UserAddress_del(data).then(res=>{
								uni.showToast({
									title:"操作成功",
									icon:'none'
								})
								uni.navigateBack()
							})
						}else{
							this.$wqzApi.kor_UserAddress_del(data).then(res=>{
								uni.showToast({
									title:"操作成功",
									icon:'none'
								})
								uni.navigateBack()
							})
							
						}
							
						} else if (res.cancel) { //点击取消之后执行的代码
						}
					},
				});
				
			},
			ToBack(){
				console.log(11111111111)
				var pages = getCurrentPages();
				var currentPage = pages[pages.length - 1];
				if (pages.length > 1) {
					uni.navigateBack({
						delta: 1,
						success: () => console.log('返回成功'),
						fail: err => console.error('返回失败:', err)
					});
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					});
				}
			},
			upload_idCard(type){
				// type 1人像面 国徽面
				var that = this
				uni.chooseImage({
					sizeType:'compressed',
					count:1,
					success: (file) => {
						 var tempFilePaths = file.tempFilePaths;
						 uni.showLoading({
						 	title:'上传中',	
							mask:true
						 })
						 
						 var MB = file.tempFiles[0].size/(1024*1025)
						 MB = MB.toFixed(2)
						 if(MB > 3){
							 uni.showToast({
							 	title:"图片超过3MB",
								icon:'none'
							 })
							 return
						 }
						 uni.uploadFile({
						 	url: baseUrl+'index/index/file', // 后端给的接口地址
						 	type: 'POST',
						 	filePath: tempFilePaths[0],// 本地文件地址
						 	name: 'file',// 传给后端时二进制文件的key
						 	header: {
								// #ifdef MP-WEIXIN
									'content-type':'multipart/form-data', // 必须添加
								// #endif
						 	},
						 	success: (res) => {
								uni.hideLoading()
								var url = imgUrl+res.data
								var Urls = url.replace(/\\/g , '/')
								console.log(Urls)
								if(type==1){
									that.info.id_pic1 = Urls
								}else{
									that.info.id_pic2 = Urls
								}
								// this.imagList.push(Urls)
								// this.$emit('imageChange' , this.imagList)
						 	},
						 	fail(err) {
								uni.hideLoading()
								uni.showToast({
									title:'上传失败,请重试!',
									icon:'none'
								})
						 	}
						 }); 
					}
				});
			},
			getAddresss(value){
				if(value == ''){
					return
				}
				 value = value.replace(/\n/g, " ");
				
				this.$wqzApi.UserAddress_identify({data:value}).then(({data})=>{
					this.info = {
						...this.info,
						name:data.name,
						phone:data.mobile,
						idcode:data.idno,
						address:data.address_detail
					}
					if(data.address.length==3){
						this.addressInfo = data.address
						this.area_text = `${this.addressInfo[0].name}${this.addressInfo[1].name}${this.addressInfo[2].name}`
					}else{
						this.addressInfo = []
						this.area_text = `请选择省市区`
					}
					uni.hideLoading()
					this.alltext = ''
					uni.showToast({
						title:'识别成功',
						icon:'none'
					})
				})
			},
			typechange(e){
				this.code_type = this.type_list[e].text
				this.info.clearance_type = this.type_list[e].type
			},
			// 地址修改/添加
			onSubmit(type){
				this.info.phone = this.info.phone.replace(' ', '')
				if(!this.info.name){
					uni.showToast({
						title:'姓名不能为空',
						icon:'none'
					})
					return
				}
				if(!this.info.phone){
					uni.showToast({
						title:'手机号不能为空',
						icon:'none'
					})
					return
				}
				if(this.addressInfo.length<3){
					uni.showToast({
						title:'请选择省市区',
						icon:'none'
					})
					return
				}
				if(this.info.phone.length!=11){
					uni.showToast({
						title:'请输入正确的手机号',
						icon:'none'
					})
					return
				}
				if(!this.info.idcode){
					uni.showToast({
						title:'请输入身份证号',
						icon:'none'
					})
					return
				}
				if(!this.info.address){
					uni.showToast({
						title:'请输入详细地址',
						icon:'none'
					})
					return
				}
				// if(!this.info.id_pic1){
				// 	uni.showToast({
				// 		title:'请上传身份证人像面',
				// 		icon:'none'
				// 	})
				// 	return
				// }
				// if(!this.info.id_pic2){
				// 	uni.showToast({
				// 		title:'请上传身份证国徽面',
				// 		icon:'none'
				// 	})
				// 	return
				// }
				var data = {
					"name": this.info.name, //姓名
					"phone":this.info.phone, //电话
					"idcode": this.info.idcode, //身份证号
					"province": this.addressInfo[0].code, //省
					"city": this.addressInfo[1].code, //市
					"area": this.addressInfo[2].code, //区
					"address": this.info.address, //详细地址
					"id_pic1": this.info.id_pic1, //身份证正面
					"id_pic2": this.info.id_pic2 //身份证反面
				}
				if(type==1){
					// 地址修改
					data.id = this.info.id
					this.$wqzApi.UserAddress_update(data).then(res=>{
						uni.showToast({
							title:'修改成功',
							icon:'none'
						})
						setTimeout(()=>{
							uni.navigateBack()
						},1500)
						
					}).catch(err=>{
						// console.log(err , '错误信息')
					})
					
				}else{
					// 地址添加
					this.$wqzApi.UserAddress_add(data).then(res=>{
						uni.showToast({
							title:'添加成功',
							icon:'none'
						})
						setTimeout(()=>{
							uni.navigateBack()
						},1500)
					}).catch(err=>{
						// console.log(err , '错误信息')
					})
				}
			},
			open_pop(){
				this.addressShow = true
			},
			getInfo(){
				var data = {
					id:this.id
				}
				this.$wqzApi.UserAddress_detail(data).then(res=>{
					this.info = res.data
					this.addressInfo = [
						{code:res.data.province ,name: res.data.province_name},
						{code:res.data.city , name: res.data.city_name},
						{code:res.data.area , name: res.data.area_name},
					]
					this.area_text = res.data.province_name+res.data.city_name+res.data.area_name
				})
				
			},
			addressChange(e){
				this.addressInfo = e				
			},
			shure_submit(){
				var e = this.addressInfo
				this.area_text = `${e[0].name}${e[1].name}${e[2].name}`
				this.addressShow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url(./index.scss);
</style>
